<template>
  <div class="pic-box">
    <el-upload
      v-if="!previewImg"
      :action="uploadImgUrl"
      list-type="picture-card"
      :file-list="images"
      :data="uploadData"
      :on-preview="handlePreview"
      :before-upload="beforeUpload"
      :before-remove="beforeRemove"
      :on-remove="handleRemove"
      :on-success="handleSuccess"
      limit:1
    >
      <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog :visible.sync="visible">
      <img width="60%" :src="previewImg" />
    </el-dialog>
  </div>
</template>

<script type='text/ecmascript-6'>
import { getUploadToken } from "@/api/monitor/file";
export default {
  name: "pic",
  props: {
    images: {
      type: Array,
      default() {
        return [];
      },
    },
    image:{
      type: String,
      default: ""
    }
  },
  data() {
    return {
      previewImg: this.image,
      visible: false,
      uploadImgUrl: "https://upload-z2.qiniup.com",
      upload_domain: "",
      uploadData: { token: "", key: "" },
    };
  },
  methods: {
    // 上传图片之前
    beforeUpload(file) {
      let _self = this;
      return new Promise((resolve, reject) => {
        getUploadToken()
          .then((response) => {
            _self.uploadData.key = response.data.key;
            _self.uploadData.token = response.data.token;
            _self.upload_domain = response.data.domain;
            resolve(true);
          })
          .catch((err) => {
            console.log("出错了...", err);
            reject(false);
          });
      });
    },
    beforeRemove(file, fileList) {
      return new Promise((resolve, reject) => {
        this.$confirm(`是否删除该图片？`, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.$message({ type: "success", message: "删除成功!" });
            resolve();
            return true;
          })
          .catch((err) => {
            reject(err);
            return false;
          });
      });
    },
    handleRemove(file, fileList) {
      const type = "remove";
      const o = { file, fileList, type };
      this._upload(o);
    },
    handlePreview(file) {
      this.previewImg = file.url;
      this.visible = true;
    },
    handleSuccess(response, file, fileList) {
      let urls = this.upload_domain + response.key;
      const type = "success";
      const o = { file, fileList, type, urls};
      this._upload(o);
    },
    _upload(o) {
      this.$emit("upload-change", o);
    },
  },
};
</script>

<style lang="less" scoped>
/deep/ .el-upload--picture-card {
  width: 60px;
  height: 60px;
}
/deep/ .el-upload {
  width: 60px;
  height: 60px;
  line-height: 60px;
}
/deep/ .el-upload-list--picture-card .el-upload-list__item {
  width: 60px;
  height: 60px;
  line-height: 60px;
}
/deep/ .el-upload-list--picture-card .el-upload-list__item-thumbnail {
  width: 60px;
  height: 60px;
  line-height: 60px;
}
/deep/ .avatar {
  width: 60px;
  height: 60px;
}
.el-icon-plus {
  font-size: 14px;
}
</style>
